<template>
  <view
    class="w-screen backdrop-sepia text-lightText h-screen bg-lightBg dark:bg-darkBg dark:text-darkText"
  >
    <view
      class="dark:bg-slate-700 bg-slate-200 absolute -left-4 -top-5 h-[30vw] w-[30vw] animate-moveWater"
    ></view>
    <view
      class="dark:bg-slate-800 bg-slate-300 absolute right-2/3 top-[60%] h-[60vw] w-[60vw] animate-moveWater"
    ></view>
    <view
      class="dark:bg-slate-900 bg-slate-400 absolute left-1/3 top-16 h-[100vw] w-[100vw] origin-top-left animate-moveWater-revert"
    ></view>
    <view class="w-[90vw] mx-auto z-10 relative top-60">
      <view class="rounded-lg shadow-darkShadow">
        <wd-form ref="form" :model="loginInfo">
          <wd-input
            @input="validate"
            label="用户名"
            label-width="100px"
            prop="username"
            clearable
            v-model="loginInfo.username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <wd-input
            @input="validate"
            label="密码"
            label-width="100px"
            prop="password"
            show-password
            clearable
            v-model="loginInfo.password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </wd-form>
      </view>
      <view class="mt-16 w-4/5 mx-auto">
        <wd-button
          :disabled="!loginAble"
          :loading="loading"
          plain
          type="text"
          size="large"
          @click="login"
          block
          >登录</wd-button
        ></view
      >
      <view class="bg-red-500">dskk</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { authApi } from "@/request/auth";
import { userUserStore } from "@/store/user";
import { reactive, ref } from "vue";
import { useNotify, useToast } from "wot-design-uni";
import type { FormExpose } from "wot-design-uni/components/wd-form/types";
const { showNotify, closeNotify } = useNotify();
const { success: showSuccess } = useToast();
const loading = ref(false);
const form = ref<FormExpose>();
const loginAble = ref(false);
const validate = () => {
  loginInfo.password && loginInfo.username
    ? (loginAble.value = true)
    : (loginAble.value = false);
};
const loginInfo = reactive<{
  username: string;
  password: string;
}>({
  username: "",
  password: "",
});
const userStore = userUserStore();
console.log(userStore, "userStore");

const login = async () => {
  await form.value.validate();
  loading.value = true;

  const res = await authApi.login(loginInfo);
  loading.value = false;

  if (res.status == 0) {
    showNotify({ type: "success", message: res.message });
    localStorage.setItem("token", res.data);
    uni.redirectTo({
      url: "/pages/index/index",
    });
  } else {
    showNotify(res.message);
  }
  console.log(res);
};
</script>
